<template>
  <div class="answerSheet">
    <van-popup v-model="answerSheetShow" position="bottom" :style="{ height: '100%' }">
      <!-- 头部 -->
      <van-nav-bar title="答题卡题">
        <template #right>
          0/74题
        </template>
      </van-nav-bar>
      <!-- 题数 -->
      <div
        style="padding: 10px 15px;background-color: #f7f4f5;font-size: 14px;color:#b4b4bd"
      >
        共74题
      </div>
      <!-- 答题状态 -->
      <van-row class="answerState">
        <van-col
          span="2"
          v-for="index in 74"
          :key="index"
          style="text-align: center;"
          class="states"
          ><span>{{ 0 + index }}</span></van-col
        >
      </van-row>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      answerSheetShow: false
    }
  }
}
</script>

<style lang="less" scoped>
.answerSheet {
  .answerState {
    padding: 20px 10px 0px 20px;
    .states {
      margin: 12px;
      padding: 6px;
      border-radius: 50%;
      font-size: 16px;
      color: #b4b4bd;
      border: 1px solid #ccc;
    }
  }
}
</style>
